<template>
     <div class="breadcrumb_wrapper">
                <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb">
                    <el-breadcrumb-item class="breadcrumb_item">店铺信息</el-breadcrumb-item>
                    <el-breadcrumb-item class="breadcrumb_item">基础信息</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        <div class="full-width-divider"></div> <!-- 新增的横线元素 -->  
    <el-container class="contain">
        <el-aside width="65%" class="aside-container">
            <div style="margin-top: 3%;">
                <!-- 店铺名称 店铺ID 店铺logo 联系地址-->
                <div>
                    <el-form :model="form" class="form" >  
                        <el-form-item label="店铺名称" prop="name" class="next-form-item-label">  
                            <template #label >  
                                <span style="color: #f56c6c; margin-right: 5px; ">*</span> 店铺名称  
                            </template> 
                            <el-input v-model="form.name" style="width: 600px;height: 34px;" placeholder="请输入店铺名称"></el-input>
                        </el-form-item>
                        <el-form-item label="店铺描述" prop="description" class="next-form-item-label">
                            <el-input  type="textarea" autosize v-model="form.description" rows="5"
                            style="width: 600px;height: auto;"  
                            >
                        </el-input>  
                        </el-form-item>
                        <el-form-item label="店铺标志" prop="logo" class="next-form-item-label">
                            <div style="width: 600px;">
                                <div style="width: 150px;  height: 150px;overflow: hidden;">
                               <el-upload
                                    v-model:file-list="fileList"
                                    :auto-upload="false"
                                    action="#"
                                    :limit="1"
                                    list-type="picture-card"
                                    :on-change="uploadFile"
                                    :on-remove="removeFile">
                                    <el-icon><PictureFilled /></el-icon>
                                </el-upload>
                                </div>
                            </div> 
                        </el-form-item>
                        <el-form-item label="联系地址" prop="address" class="next-form-item-label">
                                <el-cascader
                                    size="large"
                                    :options="pcaTextArr"
                                    v-model="form.address">
                                </el-cascader>
                                <el-input v-model="form.address" style="width: 360px;height: 41.33px;margin-left: 10px;" placeholder="请输入"></el-input>
                                <el-text style="color: #999; font-size: 12px; font-weight: 530;width: 600px;">请确保您填写的地址信息真实有效</el-text>  
                        </el-form-item>
                        <el-form-item label="店铺联系人手机号" prop="phone" class="next-form-item-label">
                            <template #label >  
                                <span style="color: #f56c6c; margin-right: 5px; ">*</span> 店铺联系人手机号 
                                <el-button text style="color:#5584ff;font-size: 12px; margin-left: 10px;" v-if="modify_phone===1" @click="toggleModifyPhone">修改</el-button>
                            </template> 
                            <el-input v-model="form.phone" v-if="modify_phone===1"
                            style="width: 360px;height: 41.33px;" 
                            placeholder="请输入"
                            disabled
                            >
                            </el-input>
                            <el-input v-model="form.phone" v-if="modify_phone===2"
                            style="width: 360px;height: 41.33px;" 
                            placeholder="请输入手机号"
                            >
                            </el-input>
                        </el-form-item>        
                    </el-form>
                    <div class="save_contain">
                        <el-button class="save" type="primary" @click="submit">保存</el-button>
                    </div>
                </div>
                <div class="aside-right-border"></div> 
            </div>

        </el-aside>

        <el-main>
            <div class="effect_preview">
                <h2>效果预览</h2>
            </div>
            <div style="margin-top: 15%;">
                <el-text>网页版店铺卡片</el-text>
            </div>
            <el-card style="max-width: 325px; margin-top: 5%;" shadow="always">  
                <div style="display: flex; align-items: center;">  
                    <el-image v-if="form.logo === null" src="/images/shop-grc/shop_logo.png"  
                            style="width: 100px; height: 104px; margin-right: 20px;" />  
                      <el-image v-if="form.logo !== null" :src="Path.imgPath + form.logo"  
                            style="width: 100px; height: 104px; margin-right: 20px;" />         
                    <div style="display: flex; flex-direction: column;">  
                        <span style="margin-bottom: 10px; color: #5584ff;margin-top: -50px;">{{ form.name }}</span>  
                        <span style="margin-bottom: 10px; color: #5584ff;margin-top: -12px;">{{ form.description }}</span>  
                    </div>  
                </div>  
            </el-card>
        </el-main>
    </el-container>
</template>

<script setup>
import {  reactive ,ref } from 'vue'
import { ArrowRight} from '@element-plus/icons-vue'
import { pcaTextArr} from "element-china-area-data";
import { PictureFilled } from '@element-plus/icons-vue'
import { get,post } from "@/plugins/axios"
import { Path } from '@/constant/index';

//选择是否修改手机号
const modify_phone = ref(1);
// 切换修改手机号的模式  
function toggleModifyPhone() {  
    modify_phone.value = 2  
}  
  
function cancelModifyPhone() {  
     modify_phone.value = 1  
}  

const form = reactive({
    id:null,
    name: null,
    description:null,
    phone: null,
    address: null,
    logo:null,
    userName:null,
    file:null,
    phone:null
  })
getShopByUid()
function getShopByUid(){
    get(Path.getShopInfoById,{
    },content => {
         for(let key in form){
      // 将后端没有的属性的数据排除掉
      if(Object.prototype.hasOwnProperty.call(content,key)){
        form[key] = content[key]
      }
    }
     if(content.logo !== null){
        fileList.push({
        url: Path.imgPath + content.logo
      })
     }
    })
} 
const fileList = reactive([])
function uploadFile(file) {
  form.file = file.raw
}
function removeFile(){
  form.file = null
}
function submit(){
  post(Path.updateShopInfo,{
    id: form.id,
    name:form.name,
    description:form.description,
    file:form.file,
    address:form.address,
    phone:form.phone,
  },content => {
    location.reload()
    fileList.clear()
  })  
}
 
</script>
 

<style lang="scss" scoped>

// 输入框样式和触发事件
::v-deep .el-input__wrapper {
    background-color: #f2f4f7;
    border-radius: 5px;
    border: 1px solid #dcdfe6; // 添加默认边框
    border-radius: 8px;
   
  }
::v-deep .el-input__wrapper:hover {
  background-color: #ffffff;
  border-color: #409eff; 
  transition: background-color 0.3s ease, border-color 0.3s ease; // 添加过渡效果
}

//面包屑内部样式
.breadcrumb{
    display: flex; // 确保面包屑导航内部也是 Flex 布局  
    align-items: center; // 垂直居中 
}
.breadcrumb_wrapper{
    height: 55px;
    display: flex;
}
.breadcrumb_item{
    font-size: larger;
}


.form{
    margin-left: 0%;
}
label {
    cursor: default;
}
.next-form-item-label {
    display: inline-block;
    margin-left: 0;
}

//横线
.full-width-divider {  
    width: 100%; // 横跨整个容器宽度  
    height: 2px; // 横线的高度  
    background-color: #eeeeee; // 横线的颜色  
    margin-top: -1px; // 如果需要的话，调整这个值以精确控制横线的位置  
    // 注意：如果el-aside和el-main之间有间距，你可能需要调整这个margin-top的值  
    // 或者，如果这条横线应该在el-aside和el-main之间完全占据宽度，  
    // 你可能需要将它放在一个包裹el-aside和el-main的父容器内，并使用Flexbox或Grid来布局  
} 

//竖线
.aside-right-border {  
    position: absolute; // 绝对定位竖线  
    right: 0; // 紧贴 el-aside 的右侧  
    top: 60px; // 从顶部开始  
    bottom: 60px; // 到底部结束  
    width: 1px; // 竖线的宽度  
    height: 82%;
    overflow-y: hidden; 
    background-color: #eeeeee; // 竖线的颜色  
    // 如果需要，可以添加其他样式，如圆角等  
}  
.aside-container{
    position: relative; // 为竖线提供定位上下文  
    display: flex; // 使用 Flexbox 布局  
    height: 100%;
    overflow-y: hidden; 
}

.save{
    width: 88px;
    height: 36px;
    margin-top: 1%;
    border-radius: 15px;

}

.contain{
    margin-left: 12%;
    height: 90%;
    overflow-y: hidden; 
}
.save_contain{
    width: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}
//效果预览
.effect_preview{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
图片上传
*/
.avatar-uploader .el-upload {  
    border: 1px dashed #d9d9d9;  
    border-radius: 6px;  
    cursor: pointer;  
    position: relative;  
    overflow: hidden;  
}  
.avatar-uploader .el-upload:hover {  
    border-color: #409EFF;  
}  
.avatar-uploader-icon {  
    font-size: 28px;  
    color: #8c939d;  
    width: 100%;  
    text-align: center;  
    line-height: 160px;  
}  
.avatar {  
    width: 80px;  
    height: 80px;  
    display: block;  
}  
</style>